<script lang="ts">
import {defineComponent} from 'vue'
import DomMoveScale from "@/components/DomMoveScale/DomMoveScale.vue";
import {TreeUtils} from "@/utils/TreeUtils.ts";
import {deepClone} from "@/utils";
// @ts-ignore
export default defineComponent({
  name: "ComTest",
  components: {DomMoveScale},
  created() {
    const treeList = [
      {
        id: '1',
        children: [
          {
            id: '1-1',
            children: [
              {
                id: '1-1-1'
              },
              {
                id: '1-1-2'
              },
            ]
          },
          {
            id: '1-2',
            children: [
              {
                id: '1-2-1'
              },
              {
                id: '1-2-2'
              },
            ]
          },
        ]
      },
      {
        id: '2',
        children: [
          {
            id: '2-1',
            children: [
              {
                id: '2-1-1'
              },
              {
                id: '2-2-2'
              },
              {
                id: '2-2-3'
              },
            ]
          },
          {
            id: '2-2',
            children: [
              {
                id: '2-2-1'
              },
              {
                id: '2-2-2'
              },
            ]
          },
        ]
      },
    ]
    const list = TreeUtils.toList(treeList)
    console.log(list)
    console.log(TreeUtils.listToTree(deepClone(list)));
  }
})
</script>

<template>
  <div class="app-container">
    <DomMoveScale v-slot="scope">
      <img style="width:100%" :style="{transform:scope.transform}" src="@/assets/layouts/logo.png" />
    </DomMoveScale>
  </div>
</template>

<style scoped lang="scss">
.app-container{
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
